<template>
  <div>
    <q-expansion-item
      clickable
      :header-inset-level="calcLevel"
      v-for="menu in menuList"
      :key="menu.id"
      :icon="menu.graphUrl || 'toc'"
      :label="menu.graphUrl"
      :header-style="headerStyleActive(menu)"
      :expand-icon-class="(menu.children && menu.children.length > 0) ? '' : 'hidden'"
      @click="openMenu(menu)"
    >
      <AmyMenuItem :menu-list="menu.children" :level="2"/>
    </q-expansion-item>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { CRouteItem } from 'stores/model';
import { useNavTabStore } from 'stores/navTabStore';

export default defineComponent({
  name: 'AmyMenuItem',
  components: {},
  props: {
    menuList: {
      type: Array,
      require: true
    },
    level: {
      type: Number,
      default: () => {
        return 1;
      }
    }
  },

  setup (props, context) {
    //当前路由
    const route = useRoute();
    const router = useRouter();
    //store
    const store = useNavTabStore();

    //数据解构
    const {
      menuList,
      level
    } = toRefs(props);
    //*******************************
    //      菜单模块
    //*******************************
    //必须用computed
    const calcLevel = computed(() => {
      if (level.value === 1) {
        return 0;
      } else {
        return (level.value - 1) * 0.5;
      }
    });

    //路由跳转
    const openMenu = (u: CRouteItem) => {
      if (u.children && u.children.length > 0) {
        return;
      }

      // 路径不同就切换下
      if (u.path !== route.path) {
        router.push(u.path);
        store.addRouteTabs({
          name: u.meta.title,
          path: u.path
        });
      }
    }

    //当前菜单选中进入路由后状态
    const headerStyleActive = (m: CRouteItem) => {
      if (m.path !== '') {
        if (route.path === m.path) {
          return {
            color: '#1890ff'
          };
        }
      }
      return {};
    }

    //*******************************
    //      启动模块
    //*******************************
    onMounted(() => {

    })

    return {
      menuList,
      level,
      calcLevel,
      openMenu,
      headerStyleActive
    };
  }
});
</script>

<style lang="scss" scoped>
  //q-expansion-item
  .main-menu{
    .q-item {
      min-height: 35px;
    }
  }

  //q-expansion-item隐藏展开图标项
  .hide-icon {
    display: inline;
  }
</style>
